<template>
    <div class="body">
        <van-nav-bar title="充值咖啡钱包" left-text="" right-text="" left-arrow @click-left="onClickLeft"
             />
        <p><span class="text2">欢迎下单哦</span></p>
        <div class="box">
            <TopUpWallet v-for="item of BuyNumber.arr" :arr="item" :key="item.coupon_id" ></TopUpWallet>
        </div>
        <footer>
            <div>
                <p>应付合计</p><b>￥{{ BuyNumber.money }}</b>
                <van-button plain @click="onClickRight">去结算</van-button>
            </div>
        </footer>
    </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import TopUpWallet from '@/components/order/TopUpWallet.vue'

import { ref , onMounted} from 'vue'
import { getCoupon } from '@/api/api'
import { useBuyNumber  } from '@/store/discountCoupon.js'
const BuyNumber = useBuyNumber()

const router = useRouter()
const onClickLeft = () => router.back();
const onClickRight = () => {
    router.push({
        name: "confirmorder_1",
        query: { }
    })
    
};//跳确认订单路由
//请求获取优惠券接口
onMounted(async ()=>{
    const res = await getCoupon()
    console.log(res.list)
    //把获取到的数据存到store里
    BuyNumber.arr = res.list
//遍历所有优惠券加了几个的组件
    BuyNumber.arr.forEach(i => {
        i.value = 0
        console.log(BuyNumber.arr)
        
    });
    
})
</script>   

<style lang="scss" scoped>
.body {
    overflow: hidden;
}

.van-nav-bar {
    position: fixed;
    width: 375px;
    height: 44px;
    // top: 20px;
    color: rgba(56, 56, 56, 1);
    background-color: rgba(255, 255, 255, 1);
    font-size: 18px;
    line-height: 150%;
    text-align: center;
    font-weight: bold;
}

.body>p {
    margin-top: 44px;
    height: 88px;
}

.text1 {
    position: absolute;
    width: 104px;
    height: 19px;
    left: 34px;
    top: 88px;
    color: rgba(80, 80, 80, 1);
    font-size: 13px;
    line-height: 150%;
    text-align: left;
}

.text2 {
    position: absolute;
    width: 80px;
    height: 19px;
    left: 139px;
    top: 88px;
    color: rgba(255, 141, 26, 1);
    font-size: 13px;
    line-height: 150%;
    text-align: left;
}

.text3 {
    position: absolute;
    width: 156px;
    height: 19px;
    left: 178px;
    top: 88px;
    color: rgba(80, 80, 80, 1);
    font-size: 13px;
    line-height: 150%;
    text-align: left;
}

.box {
    width: 375px;
    color: rgba(80, 80, 80, 1);
    background-color: rgba(255, 255, 255, 1);
    font-size: 14px;
    line-height: 150%;
    text-align: center;
    margin-bottom: 60px;
}

footer {
    height: 60px;
}

footer>div {
    position: fixed;
    width: 375px;
    height: 60px;
    bottom: 0px;
    color: rgba(80, 80, 80, 1);
    background-color: rgba(255, 255, 255, 1);
    font-size: 14px;
    line-height: 150%;
    text-align: center;
}

footer p {
    position: absolute;
    width: 56px;
    height: 15px;
    left: 15px;
    top: 24px;
    color: rgba(56, 56, 56, 1);
    font-size: 14px;
    line-height: 150%;
    text-align: left;
    font-weight: bold;
}

footer b {
    position: absolute;
    width: 39px;
    height: 36px;
    left: 82px;
    top: 14px;
    color: rgba(56, 56, 56, 1);
    font-size: 24px;
    line-height: 150%;
    text-align: left;
    font-weight: bold;
}

.van-button {
    position: absolute;
    width: 119px;
    height: 60px;
    right: 0;
    color: rgba(255, 255, 255, 1);
    background-color: rgba(144, 192, 239, 1);
    font-size: 16px;
    line-height: 150%;
    text-align: center;
}
</style>